<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="人才培养"></Breadcrumb>

    <h1 class="page-title">人才培养</h1>

    <p class="page-subtitle">构建多层次、多领域的人才培养体系，为企业数字化转型提供人才支撑</p>

    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>人才培养体系</h2>
          <p>
            创新服务平台人才培养体系以市场需求为导向，以能力培养为核心，构建了覆盖技术研发、产品设计、项目管理等多个领域的完整人才培养生态。我们与100+高校和50+行业领先企业建立了深度合作关系，共同开发人才培养标准和课程体系。
          </p>
          <p>人才培养体系分为基础能力培养、专业技能提升和领导力发展三个层次，通过线上线下相结合的方式，为学员提供灵活多样的学习路径。我们每年培养各类数字化人才超过5000人，人才就业率达到95%以上。</p>
          <p>平台拥有200+专业讲师和行业导师，配备先进的实训环境和教学设施，为人才培养提供全方位支持。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="人才培养" class="intro-image">
      </div>
    </div>


    <div class="system-section">
      <h2 class="section-title">培养体系</h2>
      <p>多层次、多领域的人才培养体系，满足不同阶段人才发展需求</p>

      <div class="system-grid">
        <div class="system-card">
          <div class="system-icon">🎓</div>
          <h3>基础能力培养</h3>
          <p>针对初入职场或转行人员，提供基础技能和职业素养培训，包括编程基础、数据分析、沟通协作等通用能力。</p>
        </div>

        <div class="system-card">
          <div class="system-icon">💻</div>
          <h3>专业技能提升</h3>
          <p>针对有一定基础的从业人员，提供专业技术深度培训，包括人工智能、大数据、云计算等前沿技术领域。</p>
        </div>

        <div class="system-card">
          <div class="system-icon">👨‍💼</div>
          <h3>领导力发展</h3>
          <p>针对中高层管理人员，提供战略思维、团队管理、创新领导力等高阶能力培训。</p>
        </div>
      </div>
    </div>

    <div class="program-section">
      <h2 class="section-title">特色培养项目</h2>
      <p>针对不同领域和层次的人才培养项目，满足企业多样化人才需求</p>

      <div class="program-list">
        <div class="program-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="AI人才培养" class="program-image">
          <div class="program-content">
            <h3>人工智能精英培养计划</h3>
            <p>面向AI领域的高端人才培养项目，涵盖机器学习、深度学习、计算机视觉等核心技术。项目采用"理论+实践+项目"的培养模式，学员将在导师指导下完成真实AI项目开发，培养解决实际问题的能力。</p>
          </div>
        </div>

        <div class="program-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="数字化转型" class="program-image">
          <div class="program-content">
            <h3>数字化转型领军人才计划</h3>
            <p>针对企业数字化转型需求设计的高管培养项目，涵盖数字化战略、组织变革、技术应用等内容。通过案例研讨、企业参访、实战演练等方式，提升学员的数字化领导力。</p>
          </div>
        </div>

        <div class="program-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="新工科" class="program-image">
          <div class="program-content">
            <h3>新工科人才培养项目</h3>
            <p>与高校合作的新工科人才培养项目，将产业需求融入教学体系，培养具备跨学科知识和实践能力的复合型人才。项目采用"校企双导师制"，学生在校期间即可参与企业真实项目。</p>
          </div>
        </div>
      </div>
    </div>


    <div class="faculty-section">
      <h2 class="section-title">师资力量</h2>
      <p>汇聚行业专家和学术精英，打造高水平教学团队</p>

      <div class="faculty-grid">
        <div class="faculty-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="张教授" class="faculty-avatar">
          <h3>张伟</h3>
          <div class="faculty-title">人工智能首席专家</div>
          <div class="faculty-desc">清华大学计算机系教授，国家人工智能重点实验室主任，发表论文200余篇。</div>
        </div>

        <div class="faculty-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="李总监" class="faculty-avatar">
          <h3>李明</h3>
          <div class="faculty-title">数字化转型专家</div>
          <div class="faculty-desc">前世界500强企业CIO，20年企业数字化转型经验，主导多个大型数字化项目。</div>
        </div>

        <div class="faculty-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="王博士" class="faculty-avatar">
          <h3>王芳</h3>
          <div class="faculty-title">大数据技术专家</div>
          <div class="faculty-desc">大数据领域资深研究员，主导开发多个大数据平台，拥有10余项技术专利。</div>
        </div>

        <div class="faculty-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="赵总" class="faculty-avatar">
          <h3>赵强</h3>
          <div class="faculty-title">创新管理专家</div>
          <div class="faculty-desc">知名创新管理咨询公司创始人，为多家企业提供创新战略咨询服务。</div>
        </div>
      </div>
    </div>


    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业和个人提供了优质的人才培养服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="科技企业" class="case-image">
          <div class="case-content">
            <h4>某科技企业AI人才培养</h4>
            <p>为该企业定制AI人才培养计划，培养100名AI工程师，项目成果直接应用于企业产品研发。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="金融机构" class="case-image">
          <div class="case-content">
            <h4>金融机构数字化转型培训</h4>
            <p>为金融机构提供数字化转型系列培训，覆盖300名管理人员，助力企业数字化战略落地。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="高校合作" class="case-image">
          <div class="case-content">
            <h4>高校新工科人才培养项目</h4>
            <p>与5所高校合作开展新工科人才培养，共建10门课程，培养500名复合型人才。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>



    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 人才培养介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 培养体系 */
.system-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.system-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.system-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.system-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.system-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.system-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* 培养项目 */
.program-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.program-list {
  margin-top: 30px;
}

.program-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e0e9ff;
}

.program-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.program-content {
  flex: 1;
}

.program-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.program-content p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

/* 师资力量 */
.faculty-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.faculty-card {
  text-align: center;
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s;
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.faculty-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
  border: 3px solid #e0e9ff;
}

.faculty-card h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #1e5799;
}

.faculty-title {
  color: #207cca;
  font-size: 14px;
  margin-bottom: 10px;
}

.faculty-desc {
  color: #666;
  font-size: 14px;
}

/* 成功案例 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
</style>